<template>
  <div class="tab">
    <!-- <img src="../assets/tab/1.png" alt=""> -->
    <img :src="t==k?v.b:v.a" alt="" v-for="(v,k) in arr" :key="k" @click="tab(v,k)">
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {a:require("../assets/tab/1.png"),b:require("../assets/tab/5.png"),path:"/"},
                {a:require("../assets/tab/2.png"),b:require("../assets/tab/6.png"),path:"/dad"},
                {a:require("../assets/tab/3.png"),b:require("../assets/tab/7.png"),path:"/car"},
                {a:require("../assets/tab/4.png"),b:require("../assets/tab/8.png"),path:"/my"},
            ],
            t:0
        }
    },
    methods:{
        tab(v,k){
            this.t=k
            this.$router.push(v.path)
        }
    }
}
</script>

<style>
   .tab{
       position: fixed;
       bottom: 0;
       height: 50px;
       display: flex;
       width: 100%;
       justify-content: space-around;
       border-top:1px solid gray ;
   }
</style>